import { createStyles } from "../../utils/index";
import * as vars from "../../theme";

const styles = {
  root: {
    height: 56,
    width: "100%",

    fontFamily: "PingFang SC",
    backgroundColor: "#fff",
    zIndex: 1,
  },
  container: {
    position: "relative",
    flexDirection: "row",
    justifyContent: "space-between",
    backgroundColor: "#fff",
    zIndex: 2,
    // borderBottomWidth: 1,
    // borderColor:

    shadowColor: "rgba(0, 0, 0, 0.5)",
    shadowOffset: {
      width: 0,
      height: 2, // 1为上下都有阴影，2只有下阴影
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
  },
  bottomContainer: {
    height: 20,
    width: "100%",
    backgroundColor: vars.ColorBackground,
    zIndex: 1,
    ...vars.baseBorder,
  },
  left: {
    width: "50%",
    flexDirection: "row",
  },
  right: {
    width: "50%",
    flexDirection: "row",
    justifyContent: "flex-end",
  },
  item: {
    width: 40,
    height: 56,
    marginLeft: 12,
    marginRight: 12,
    alignItems: "center",
    position: "relative",
  },
  itemActive: {
    backgroundColor: "rgba(0, 0, 0, 0.8)",
  },
  text: {
    color: vars.ColorFontBase,
    marginTop: 2,
    fontSize: 10,
    lineHeight: 14,
    position: "absolute",
    bottom: 0,
  },

  news: {
    backgroundColor: "rgb(90, 40, 200)",
    width: 10,
    height: 10,
    borderRadius: 5,
    position: "absolute",
    top: 0,
    right: 0,
    zIndex: 4,
  },

  active: {
    width: 74,
    height: 74,
    zIndex: 2,
    // borderStyle: "solid",
    // borderWidth: 1,
    position: "absolute",
    left: "50%",
    top: -2,
    marginLeft: -37,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgb(242, 242, 242)",
    borderRadius: 37,

    shadowColor: "rgba(0, 0, 0, 0.5)",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 2,
  },
  activeInnerRound: {
    width: 60,
    height: 60,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgb(255, 255, 255)",
    borderRadius: 30,
  },

  roundContinaer: {
    position: "absolute",
    zIndex: 3,
    height: 40,
    width: 40,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 20,
    shadowColor: "rgba(0, 0, 0, 0.5)",
    backgroundColor: "white",
    // borderWidth: 1,
    // borderColor: "red",
  },
  round: {
    position: "absolute",
    zIndex: 3,
    height: 40,
    width: 40,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 20,
    shadowColor: "rgba(0, 0, 0, 0.5)",
    backgroundColor: "white",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 2,
  },

  activeRound: {
    justifyContent: "center",
    alignItems: "center",
  },
  icon: {
    fontSize: 20,
    color: vars.ColorFontBase,
  },
  activeIcon: {
    fontSize: 28,
    color: vars.ColorFontBase,
  },
  activeText: {
    color: vars.ColorFontBase,
    // marginTop: 2,
    fontSize: 10,
    lineHeight: 14,
  },
};

export default createStyles(styles);
